<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#131313" left-icon="left" title="VIP" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>

		<view class="header flex_c">
			<view class="header-content flex_r_between">
				<view class="left flex_center">
					<image :src="$util.prefix('circle/circle-vip-icon.png')" mode="aspectFill"></image>
					<text>开通VIP</text>
				</view>

				<view class="right">
					<image :src="$util.prefix('circle/circle-vip-image.png')" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="block">
				<view class="flex_c">
					<view class="content-title flex_center">
						<view class="line left-line"></view>
						<text>VIP设置</text>
						<view class="line right-line"></view>
					</view>
				</view>
				
				<view class="list flex_r_between" v-for="(item,index) in vip" :key="index">
					<view class="item flex_center" @click="onSelectVip(index)">
						<view class="label">时间</view>
						<view class="input">
							{{ getVipName(item.time) }}
						</view>
					</view>
					
					<view class="item flex_center">
						<view class="label">价格</view>
						<input type="number" v-model="item.price" />
						<text class="text">元</text>
					</view>
					
					<view class="delete-icon" @click="deleteVip(index)" v-if="vip.length > 1">
						<u-icon name="close-circle-fill" color="#333333" size="32rpx"></u-icon>
					</view>
				</view>
				
				<view class="content-btn flex_r_around" @click="addVip" v-if="vip.length < vip_select.length">
					<view class="flex_center">
						<u-icon name="plus" color="#666666" size="24rpx" bold></u-icon>
						<text>添加</text>
					</view>
				</view>
				
			</view>
			
			<view class="block">
				<view class="flex_c">
					<view class="content-title flex_center">
						<view class="line left-line"></view>
						<text>SVIP设置</text>
						<view class="line right-line"></view>
					</view>
				</view>
				
				<view class="list flex_r_between" v-for="(item,index) in svip" :key="index">
					<view class="item flex_center" @click="onSelectSvip(index)">
						<view class="label">时间</view>
						<view class="input">
							{{ getSvipName(item.time) }}
						</view>
					</view>
					
					<view class="item flex_center">
						<view class="label">价格</view>
						<input type="number" v-model="item.price" />
						<text class="text">元</text>
					</view>
					
					<view class="delete-icon" @click="deleteSvip(index)" v-if="vip.length > 1">
						<u-icon name="close-circle-fill" color="#333333" size="32rpx"></u-icon>
					</view>
				</view>
				
				<view class="content-btn flex_r_around" @click="addSvip" v-if="svip.length < svip_select.length">
					<view class="flex_center">
						<u-icon name="plus" color="#666666" size="24rpx" bold></u-icon>
						<text>添加</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<button @click="onSubmit">保存</button>
		
		<u-action-sheet :actions="vip_select" title="时间" :show="show_vip" @close="show_vip = false" @select="onChooseVip"></u-action-sheet>
		
		<u-action-sheet :actions="svip_select" title="时间" :show="show_svip" @close="show_svip = false" @select="onChooseSvip"></u-action-sheet>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				circle_id: 0,
				
				vip: [
					{
						time: '',
						price: '',
					}
				],
				
				
				svip: [
					{
						time: '',
						price: '',
					}
				],
				
				show_vip: false,
				show_vip_index: 0,
				vip_select: [],
				vip_config: [],
				
				show_svip: false,
				show_svip_index: 0,
				svip_select: [],
				svip_config: [],
			}
		},
		methods: {
			
			addVip(){
				this.vip.push({
					time: '',
					price: '',
				})
			},
			
			deleteVip(index){
				this.vip.splice(index,1);
				this.setVipSelect();
			},
			
			addSvip(){
				this.svip.push({
					time: '',
					price: '',
				})
			},
			
			onSelectVip(index){
				this.show_vip_index = index;
				this.show_vip = true;
			},
			
			onSelectSvip(index){
				this.show_svip_index = index;
				this.show_svip = true;
			},
			
			onChooseVip(e){
				this.vip[this.show_vip_index].time = e.type;
				this.vip[this.show_vip_index].name = e.name;
				this.setVipSelect();
				
			},
			
			onChooseSvip(e){
				this.svip[this.show_svip_index].time = e.type;
				this.svip[this.show_svip_index].name = e.name;
				this.setSvipSelect();
			},
			
			getVipName(time){
				var index = this.vip_config.findIndex(item=> item.type == time );
				if(index > -1){
					return this.vip_config[index].name;
				}else {
					return '';
				}
				// console.log(this.vip_config);
			},
			
			getSvipName(time){
				var index = this.svip_config.findIndex(item=> item.type == time );
				if(index > -1){
					return this.svip_config[index].name;
				}else {
					return '';
				}
				// console.log(this.vip_config);
			},
			
			deleteSvip(index){
				this.svip.splice(index,1);
				this.setSvipSelect();
			},
			
			timeConfig(){
				this.$post('/circle.circle_vip/timeConfig').then(res=>{
					this.vip_config = res.data.vip;
					this.svip_config = res.data.svip;
					this.setVipSelect();
					this.setSvipSelect();
				});
			},
			
			setVipSelect(){
				this.vip_select = [];
				this.vip_config.forEach((element)=>{
					var index = this.vip.findIndex(item=> item.time == element.type );
					var disabled = index > -1 ? true : false;
					this.vip_select.push({
						disabled: disabled,
						name: element.name,
						type: element.type
					});
				});
			},
			
			setSvipSelect(){
				this.svip_select = [];
				this.svip_config.forEach((element)=>{
					var index = this.svip.findIndex(item=> item.time == element.type );
					var disabled = index > -1 ? true : false;
					this.svip_select.push({
						disabled: disabled,
						name: element.name,
						type: element.type
					});
				});
			},
			
			onSubmit(){
				var vip = this.vip;
				var svip = this.svip;
				
				for (var i = 0; i < vip.length; i++) {
					if(!vip[i].time || !vip[i].price){
						return this.$util.msg('请输入完整');
					}
				}
				
				for (var i = 0; i < svip.length; i++) {
					if(!svip[i].time || !svip[i].price){
						return this.$util.msg('请输入完整');
					}
				}
				
				this.$post('/circle.circle_vip/saveCircleVipConfig',{
					circle_id: this.circle_id,
					vip: JSON.stringify(vip),
					svip: JSON.stringify(svip),
				}).then(res=>{
					this.$util.msg('编辑成功');
					setTimeout(()=>{
						this.$native.backAction();
					},1000)
				});
			},
			
			getNewCircleVipConfig(){
				this.$get('/circle.circle_vip/getNewCircleVipConfig',{
					circle_id: this.circle_id
				}).then(res=>{
					if(res.data.vip){
						this.vip = JSON.parse(res.data.vip);
						this.svip = JSON.parse(res.data.svip);
						this.timeConfig();
					}else {
						this.timeConfig();
					}
				})
			},
			
		},
		
		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.circle_id = option.circle_id;
			this.getNewCircleVipConfig();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		width: 100vw;
		background: #FFF;
	}

	.nav_bar {
		background: linear-gradient(152deg, #FFE1B0 0%, #FBF0DE 100%);
	}

	.header {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/circle/circle-vip-bg.png) 0 0 no-repeat;
		background-size: 100%;
		width: 100vw;
		height: 374rpx;
		flex-direction: column-reverse;

		.header-content {
			background: url(https://qiniu-cdn.maeiyun.com//h5static/circle/circle-vip-content-bg.png) 0 0 no-repeat;
			background-size: 100%;
			width: 686rpx;
			height: 188rpx;
			padding: 0 48rpx 0 64rpx;

			.left {
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
				}

				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #F8E8C9;
				}
			}

			.right {
				width: 112rpx;
				height: 112rpx;

				image {
					width: 112rpx;
					height: 112rpx;
				}
			}

		}

	}

	.content {
		margin-top: 64rpx;
		padding: 0 32rpx;

		.block {
			margin-bottom: 48rpx;

			.content-title {
				margin-bottom: 40rpx;
				text {
					font-size: 36rpx;
					color: #462A1B;
					margin: 0 60rpx;
					font-weight: 600;
				}

				.line {
					width: 88rpx;
					height: 12rpx;
					border-radius: 6rpx;
				}

				.left-line {
					background: linear-gradient(90deg, #FDDCBB 0%, #FFFFFF 100%);
				}

				.right-line {
					background: linear-gradient(90deg, #FDDCBB 0%, #FFFFFF 100%);
				}
			}
		
			.list {
				position: relative;
				margin-bottom: 24rpx;
				
				.item {
					width: 332rpx;
					height: 96rpx;
					background: #F7F7F7;
					border-radius: 16rpx;
					overflow: hidden;
					padding: 0 24rpx;
					
					.label {
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
					}
					
					input {
						flex: 1;
						font-size: 28rpx;
						color: #333;
						text-align: right;
						margin: 0 8rpx;
					}
					
					.input {
						flex: 1;
						font-size: 28rpx;
						color: #333;
						text-align: right;
						margin: 0 8rpx;
					}
					
					.text {
						font-size: 26rpx;
						color: #131313;
					}
				}
			
				.delete-icon {
					padding: 10rpx;
					position: absolute;
					right: -27rpx;
					top: -23rpx;
				}
			}
		
			.content-btn {
				width: 684rpx;
				height: 96rpx;
				border-radius: 16rpx;
				border: 3rpx dashed #CCCCCC;
				
				text {
					font-size: 26rpx;
					color: #131313;
				}
			}
		
		}

	}

	button {
		width: 480rpx;
		height: 104rpx;
		background: #FD2A53;
		border-radius: 52rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 104rpx;
	}

</style>